<template>
  <div>
    <el-container>
      <el-header height="8vh">
        <div style="text-align: center; padding: 20px 20px 0px 0px">
          <el-text class="mx-1" type="info"> 让人人从AI中受益</el-text>
          <el-divider border-style="hiden" />
          <!-- <div style="display: flex;justify-content: center; width:100%"> -->
          <!-- <el-row>
            <el-col :span="12" :offset="6">
              <el-input
                placeholder="请输入内容"
                v-model="inputValue"
                class="input-with-button"
              >
                <template #append>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  ></el-button>
                </template>
              </el-input>
            </el-col>
          </el-row> -->
        </div>
      </el-header>
      <el-container height="92vh">
        <!-- <el-aside width="20vh">
          <div style="height: 60px">
            <el-tag type="primary" effect="dark" round> ai资讯 </el-tag>
          </div>
        </el-aside>
        <el-main >
          <carditem> </carditem>
        </el-main> -->

        <el-col>
          <el-row>
            <el-table
              :data="tableData"
              header-align
              border
              stripe
              fixed
              style="height: 80vh"
            >
              <el-table-column label="标签" width="120">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-tag v-for="(tag, id) in scope.row.tags" :key="tag">{{
                      tag
                    }}</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                prop="date"
                label="更新时间"
                width="120"
              />
              <el-table-column
                :filters="filters"
                :filter-method="filterTag"
                prop="name"
                label="项目名称"
                width="120"
              />
              <!-- <el-table-column prop="desciption" label="简述" width="180" /> -->
              <el-table-column prop="detail" label="详情" min-width="240" />
              <el-table-column label="原文" min-width="100">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-link :href="scope.row.url" underline>项目地址</el-link>
                   
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="author" label="原作者" />
              <el-table-column prop="contributor" label="贡献者" /> </el-table
          ></el-row>

          <el-row>
            <el-col :offset="8" :span="16">
              <div class="demo-pagination-block">
                <el-pagination
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :page-sizes="[20, 50, 100]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="sizes, prev, pager, next"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                /></div
            ></el-col>
          </el-row>
        </el-col>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from "vue";
import carditem from "@/components/cardItem.vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { checkSession } from "@/action/session";

const query = ref("");
const tableData = ref([]);
const filters = ref([
  { text: "Home", value: "Home" },
  { text: "Office", value: "Office" },
]);

const currentPage = ref(1);
const pageSize = ref(20);
const small = ref(false);
const background = ref(false);
const disabled = ref(true); // 登录后可使用
const total = ref(10000);

const filterTag = (value, row) => {
  return row.tag === value;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

const fetchData = () => {
  httpGet(
    `/api/ai/info/get?pageNum=${currentPage.value}&pageSize=${pageSize.value}`
  )
    .then((res) => {
      tableData.value = res.data;
    })
    .catch((e) => {
      ElMessage.error("数据加载失败: " + e.message);
    });
};

onMounted(() => {
  fetchData();
  checkSession()
    .then(() => {
      disabled.value = false;
    })
    .catch(() => {
      ElMessage("登录查看更多");
    });
});
</script>

<style scoped lang="stylus">
@import '@/assets/css/chat-plus.styl';
</style>

<style lang="stylus">
.notice-dialog {
  .el-dialog__body {
    padding: 0 20px;
  }
}

.el-tag {
  margin-right: 10px;
}
</style>